<script lang="ts" setup>
import { onMounted, reactive, ref } from 'vue'
import DetailPredict from './DetailPredict.vue'
import { i18n } from '@/lang'
const { t } = i18n.global
import { colChange, currentHook, handleSelectionChange, removeEmptyKey } from './predict-hook'
import { getPredictList, getPredictDetail, downloadPredictFile } from '@/api/system/predict'
// import { useDict } from '@/hooks/use-data-dict'
//导入当前页面封装方法
import RightToolBar from '@/components/RightToolBar.vue'
import ColumnFilter from '@/components/ColumnFilter.vue'

///导入当前页面封装方法
import { resetData } from '@/hooks/use-common'
/*查询模块*/
const totalNum = ref(0)
const queryParams = reactive({
  pageNum: 1,
  pageSize: 10
})

//文件预测详情
const showFileDetail = (row) => {
  refDetailPredictModal.value.showModal(row)
}

//备份数据
const bakQueryParams = JSON.stringify(queryParams)
const dateRange = ref([])
//查询
const handleQuery = () => {
  queryParams.pageNum = 1
  getTableData()
}
//重置
const resetQuery = () => {
  resetData(queryParams, bakQueryParams)
  dateRange.value = []
  handleQuery()
}

const checkFileSuffix = (fileSuffix) => {
  const arr = ['.obj', '.stl', '.ply']
  return arr.some((type) => {
    return fileSuffix.includes(type)
  })
}

const getTableData = () => {
  loading.value = true
  const skip = (queryParams.pageNum - 1) * queryParams.pageSize
  getPredictList({
    page: skip,
    size: queryParams.pageSize
  }).then((res) => {
    loading.value = false
    ossList.value = res.data || []
    totalNum.value = res.total
  })
}

// 下载模型文件
const downloadFile = (row) => {
  loading.value = true
  downloadPredictFile(row.id).then((res: any) => {
    loading.value = false
    // save(new Blob([res], { type: 'application/octet-stream' }), row.in_file)
    save(new Blob([res], { type: 'text/plain' }), row.in_file)
  })
}

//下载模型
const save = (blob, filename) => {
  const link = document.createElement('a')
  link.href = URL.createObjectURL(blob)
  link.download = filename
  link.click()
  document.body.removeChild(link)
}

onMounted(() => {
  handleQuery()
})

const { refDetailPredictModal, refElTable, loading, ossList, showSearch, tableHeadColumns } = currentHook(
  queryParams,
  getTableData
)
</script>

<template>
  <div class="p-10px">
    <!-- <el-form v-show="showSearch" :model="queryParams" :inline="true" label-width="80px">
      <el-form-item label="文件名" prop="filename">
        <el-input
          v-model.trim="queryParams.in_file"
          placeholder="请输入文件名"
          clearable
          class="wi-150px"
          @keyup.enter="handleQuery"
        />
      </el-form-item>
      <el-form-item label="文件类型" prop="file_type">
        <el-input
          v-model.trim="queryParams.out_file"
          placeholder="请输入原名"
          clearable
          class="wi-150px"
          @keyup.enter="handleQuery"
        />
      </el-form-item>

      <el-form-item label="文件大小(M)" prop="file_size">
        <el-input
          v-model.trim="queryParams.status"
          placeholder="请输入文件后缀名"
          clearable
          class="wi-150px"
          @keyup.enter="handleQuery"
        />
      </el-form-item>

      <el-form-item label="上传时间" style="width: 150px}">
        <el-date-picker
          v-model="timeRange"
          value-format="YYYY-MM-DD HH:mm:ss"
          type="daterange"
          range-separator="-"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          :default-time="[new Date(2000, 1, 1, 0, 0, 0), new Date(2000, 1, 1, 23, 59, 59)]"
        />
      </el-form-item>
      <el-form-item>
        <el-button type="primary" icon="Search" @click="handleQuery">搜索</el-button>
        <el-button icon="Refresh" @click="resetQuery">重置</el-button>
      </el-form-item>
    </el-form> -->
    <el-row :gutter="10" class="mb-10px">
      <RightToolBar v-model:showSearch="showSearch" @queryTable="getTableData" />
      <ColumnFilter v-if="ossList.length" :is-operation="true" :cols="tableHeadColumns" @colChange="colChange" />
    </el-row>
    <el-table
      ref="refElTable"
      v-loading="loading"
      height="calc(100vh - 350px)"
      border
      :data="ossList"
      @selection-change="handleSelectionChange"
    >
      <el-table-column type="selection" width="50" align="center" />
      <!--column头字段-->
      <template v-for="item in tableHeadColumns">
        <el-table-column
          v-if="!item.isTemplate && item.showColumn"
          :key="item.prop"
          show-overflow-tooltip
          v-bind="item"
          :align="item.align || 'center'"
          :prop="item.prop"
          :label="item.label"
        />
        <!--文件展示-->
        <el-table-column
          v-if="item.prop === 'url' && item.isTemplate && item.showColumn"
          :key="item.prop"
          show-overflow-tooltip
          v-bind="item"
          align="center"
          :prop="item.prop"
          :label="item.label"
        >
          <template #default="{ row }">
            <el-image
              v-if="checkFileSuffix(row.fileSuffix)"
              style="width: 100px; height: 100px"
              :src="row.frontDillUrl"
              preview-teleported
              :preview-src-list="[row.frontDillUrl]"
            />
            <svg-icon v-else icon-class="job" class="imgStyle" />
          </template>
        </el-table-column>
      </template>

      <el-table-column
        :label="t('predict_hook.action')"
        align="center"
        width="80"
        class-name="small-padding fixed-width"
      >
        <template #default="{ row }">
          <el-tooltip :content="t('predict_hook.dowanload')" placement="top">
            <el-button link type="primary" icon="Download" size="large" @click="downloadFile(row)" />
          </el-tooltip>

          <el-tooltip :content="t('predict_hook.details')" placement="top">
            <el-button link type="primary" icon="Reading" size="large" @click="showFileDetail(row)" />
          </el-tooltip>
        </template>
      </el-table-column>
    </el-table>
    <div class="columnSE">
      <Pagination
        v-show="totalNum > queryParams.pageSize"
        v-model:page="queryParams.pageNum"
        v-model:limit="queryParams.pageSize"
        :total="totalNum"
        @pagination="getTableData"
      />
    </div>
    <DetailPredict ref="refDetailPredictModal" @getTableData="getTableData" />
  </div>
</template>
